<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .txl {
            float: left;
            margin-top: 100px;
            margin-left: 5px;
        }

        .txl ul h4 {
            height: 50px;
            width: 200px;
            text-align: center;
            line-height: 50px;
            background-color: rgb(255, 250, 232);
        }

        .txl ul:last-child h4 {
            border: none;
        }

        .txl ul {
            overflow: hidden;
            display: none;

        }

        .txl ul li {
            height: 0px;
            line-height: 34px;
            background-color: #FBF0D2;
            transition: all .7s ease 0s;
        }

        .txl ul li:hover {
            background-color: #605c506b;
        }

        .txlmain {
            position: absolute;
            top: 100px;
            left: 205px;
            width: 1000px;
            display: flex;
            flex-direction: column;
        }

        .txlmain ol li {
            float: left; 
            border-bottom: 1px solid black;
            line-height: 50px;
            font-size: 20px;
            font-weight: 700;
            padding-left: 30px;
     
            background-image: linear-gradient(pink,pink);
        }

        .cx {
            position: absolute;
            left: 500px;
            top: 50px;
            
        }
    </style>
</head>
<!-- <form action="">
    <select id="zu"></select>
    <select id="xm"></select>
</form> -->

<body>
    <div class="cx">
        <input type="text">
        <button>查询</button>
    </div>

    <div class="txl">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>
    <div class="txlmain">
    </div>
    <script>
      
        function xuanran(i) {
            var txlmain = document.querySelector('.txlmain');
            txlmain.innerHTML += `<ol>
            <li>姓名：${data[i].name}</li>
            <li>年龄：${data[i].age}</li>
            <li>性别：${data[i].sex}</li>
            <li>手机号：${data[i].phone}</li>
            <li>描述：${data[i].dis}</li>
            <li>分组：${data[i].fenzu}</li>
        </ol>`;
        }
        var input = document.querySelector('input')
        var txlbox = document.querySelector('.txlbox')
        var btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            var txlmain = document.querySelector('.txlmain');
            txlmain.innerHTML = ''
            for (let i = 0; i < data.length; i++) {
                if (input.value == data[i].name) {
                    xuanran(i);
                    continue;
                } else if (input.value == data[i].age) {
                    xuanran(i);
                    continue;
                } else if (input.value == data[i].sex) {
                    xuanran(i);
                    continue;
                } else if (input.value == data[i].fenzu) {
                    xuanran(i);
                    continue;
                }else if (input.value == data[i].phone) {
                    xuanran(i);
                    continue;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
                }
                // console.log(data[i].dis.length);
                // for(let j=0;j<data[i].dis.length;j++){
                //     if(data[i].dis[j].indexOf(input.value)!=-1){
                //         xuanran();
                //     }
                // }
                // else{
                //     txlmain.innerHTML = `<ol><li>查无此人</li></ol>`
                //     continue;
                // }
            }
        })
        var uls = document.querySelectorAll('ul')
        console.log(data);
        var str1 = ''
        var str2 = ''
        var str3 = ''
        var str4 = '' 
        var str5 = ''
        var str6 = ''                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
        var str7 = ''
        for (let i = 0; i < data.length; i++) {
            if (data[i].fenzu == '第一组') {
                str1 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第二组') {
                str2 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第三组') {
                str3 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第四组') {
                str4 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第五组') {
                str5 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第六组') {
                str6 += `<li>${data[i].name}</li>`
            }
        }
        uls[0].innerHTML = '<h4>第一组</h4>' + str1
        uls[1].innerHTML = '<h4>第二组</h4>' + str2
        uls[2].innerHTML = '<h4>第三组</h4>' + str3
        uls[3].innerHTML = '<h4>第四组</h4>' + str4
        uls[4].innerHTML = '<h4>第五组</h4>' + str5
        uls[5].innerHTML = '<h4>第六组</h4>' + str6
        var h4s = document.querySelectorAll('h4');
        var ullis = document.querySelectorAll('ul>li');
        for (let i = 0; i < h4s.length; i++) {
            h4s[i].onclick = function () {
                var lis = uls[i].querySelectorAll('li')
                var num = lis.length;
                for (let k = 0; k < ullis.length; k++) { // 点击前清除所有li 的高度
                    ullis[k].style.height = '0px';
                }
                for (let j = 0; j < num; j++) {
                    lis[j].style.height = '34px';
                }
            }
        }
        for (let i = 0; i < ullis.length; i++) {
            ullis[i].onclick = function () {
                var txlmain = document.querySelector('.txlmain');
                txlmain.innerHTML =
                    `<ol>
            <li>姓名：${data[i].name}</li>
            <li>年龄：${data[i].age}</li>
            <li>性别：${data[i].sex}</li>
            <li>手机号：${data[i].phone}</li>
            <li>描述：${data[i].dis}</li>
            <li>分组：${data[i].fenzu}</li>
        </ol>`
            }
        }
    </script>
</body>

</html>